import React from 'react';
import { connect } from 'dva';
import { formatMessage } from 'umi/locale';
import { Input, Modal, Select, Form, Row, Col, message } from 'antd';

const FormItem = Form.Item;
const { TextArea } = Input;
const { Option } = Select;

const EditPropertyForm = Form.create()(props => {
  const {
    modalVisible,
    form,
    handleModalVisible,
    handleEdit,
    propertyInfo,
    units,
    dataTypes,
  } = props;

  const okHandle = () => {
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      if (
        fieldsValue.minRange !== undefined &&
        fieldsValue.minRange !== null &&
        fieldsValue.minRange !== ''
      ) {
        if (
          fieldsValue.maxRange === undefined ||
          fieldsValue.maxRange === null ||
          fieldsValue.maxRange === ''
        ) {
          message.error({
            content: formatMessage({ id: 'app.mm.productmodel.property.info.maxrange.place' }),
            key: 1,
          });
          return;
        }
        if (fieldsValue.maxRange <= fieldsValue.minRange) {
          message.error({
            content: formatMessage({
              id: 'app.mm.productmodel.property.info.maxrange.must.greater.than.minrange',
            }),
            key: 1,
          });
          return;
        }
      }
      if (
        fieldsValue.maxRange !== undefined &&
        fieldsValue.maxRange !== null &&
        fieldsValue.maxRange !== ''
      ) {
        if (
          fieldsValue.minRange === undefined ||
          fieldsValue.minRange === null ||
          fieldsValue.minRange === ''
        ) {
          message.error({
            content: formatMessage({ id: 'app.mm.productmodel.property.info.minrange.place' }),
            key: 1,
          });
          return;
        }
        if (fieldsValue.maxRange <= fieldsValue.minRange) {
          message.error({
            content: formatMessage({
              id: 'app.mm.productmodel.property.info.maxrange.must.greater.than.minrange',
            }),
            key: 1,
          });
          return;
        }
      }

      fieldsValue.range =
        fieldsValue.minRange !== undefined &&
        fieldsValue.minRange !== null &&
        fieldsValue.minRange !== '' &&
        fieldsValue.maxRange !== undefined &&
        fieldsValue.maxRange !== null &&
        fieldsValue.maxRange !== ''
          ? `${fieldsValue.minRange}~${fieldsValue.maxRange}`
          : undefined;

      handleEdit(fieldsValue, form);
    });
  };

  const renderOption = data => data.map(item => <Option value={item.id}>{item.name}</Option>);

  return (
    <Modal
      title={formatMessage({ id: 'app.mm.productmodel.property.edit' })}
      destroyOnClose
      visible={modalVisible}
      width={618}
      onOk={okHandle}
      maskClosable={false}
      onCancel={() => handleModalVisible()}
    >
      <div style={{ width: 530, paddingLeft: 44 }}>
        <FormItem style={{ marginTop: 0, marginBottom: 0 }}>
          {form.getFieldDecorator('id', { initialValue: propertyInfo.id })(<Input type="hidden" />)}
        </FormItem>
        <FormItem style={{ marginTop: 0, marginBottom: 0 }}>
          {form.getFieldDecorator('modelId', { initialValue: propertyInfo.modelId })(
            <Input type="hidden" />,
          )}
        </FormItem>
        <FormItem
          label={formatMessage({ id: 'app.mm.productmodel.property.info.name' })}
          colon={false}
        >
          {form.getFieldDecorator('name', {
            initialValue: propertyInfo.name ? propertyInfo.name : undefined,
            rules: [
              {
                required: true,
                message: formatMessage({ id: 'app.mm.productmodel.property.info.name.place' }),
              },
            ],
          })(
            <Input
              placeholder={formatMessage({ id: 'app.mm.productmodel.property.info.name.place' })}
            />,
          )}
        </FormItem>

        <FormItem
          label={formatMessage({ id: 'app.mm.productmodel.property.info.label' })}
          colon={false}
        >
          {form.getFieldDecorator('label', {
            initialValue: propertyInfo.label ? propertyInfo.label : undefined,
            rules: [
              {
                required: true,
                message: formatMessage({ id: 'app.mm.productmodel.property.info.label.place' }),
              },
            ],
          })(
            <Input
              placeholder={formatMessage({ id: 'app.mm.productmodel.property.info.label.place' })}
            />,
          )}
        </FormItem>

        <FormItem
          label={formatMessage({ id: 'app.mm.productmodel.property.info.datatype' })}
          colon={false}
        >
          {form.getFieldDecorator('dataTypeId', {
            initialValue: propertyInfo.dataTypeId ? propertyInfo.dataTypeId : undefined,
            rules: [
              {
                required: true,
                message: formatMessage({ id: 'app.mm.productmodel.property.info.dataType.place' }),
              },
            ],
          })(
            <Select
              allowClear
              style={{ width: '100%' }}
              placeholder={formatMessage({
                id: 'app.mm.productmodel.property.info.dataType.place',
              })}
            >
              {renderOption(dataTypes)}
            </Select>,
          )}
        </FormItem>
        <FormItem
          label={formatMessage({ id: 'app.mm.productmodel.property.info.range' })}
          colon={false}
        >
          <Row>
            <Col span={10}>
              {form.getFieldDecorator('minRange', {
                initialValue: propertyInfo.range ? propertyInfo.range.split('~')[0] : undefined,
              })(
                <Input
                  placeholder={formatMessage({
                    id: 'app.mm.productmodel.property.info.minrange.place',
                  })}
                />,
              )}
            </Col>
            <Col span={2} style={{ textAlign: 'center' }}>
              <span>~</span>
            </Col>
            <Col span={10} style={{ marginRight: 0 }}>
              <FormItem>
                {form.getFieldDecorator('maxRange', {
                  initialValue: propertyInfo.range ? propertyInfo.range.split('~')[1] : undefined,
                })(
                  <Input
                    placeholder={formatMessage({
                      id: 'app.mm.productmodel.property.info.maxrange.place',
                    })}
                  />,
                )}
              </FormItem>
            </Col>
          </Row>
        </FormItem>
        <FormItem
          label={formatMessage({ id: 'app.mm.productmodel.property.info.unit' })}
          colon={false}
        >
          {form.getFieldDecorator('unitId', {
            initialValue: propertyInfo.unitId ? propertyInfo.unitId : undefined,
          })(
            <Select
              allowClear
              style={{ width: '100%' }}
              placeholder={formatMessage({ id: 'app.mm.productmodel.property.info.unit.place' })}
            >
              {renderOption(units)}
            </Select>,
          )}
        </FormItem>
        <FormItem
          label={formatMessage({ id: 'app.mm.productmodel.property.info.more.desc' })}
          colon={false}
        >
          {form.getFieldDecorator('desc', {
            initialValue: propertyInfo.desc ? propertyInfo.desc : undefined,
            rules: [],
          })(<TextArea rows={4} />)}
        </FormItem>
      </div>
    </Modal>
  );
});
export default connect(({ productmodel, loading }) => ({
  productmodel,
  loading: loading.models.productmodel,
}))(EditPropertyForm);
